<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>添加缴费</title>
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/common2.css">
	<link rel="stylesheet" href="../css/layui.css" />
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
</head>

<body>
	
	<br /><br />
	<div id="vue-root" class="layui-row">
		<div class="layui-col-md6 layui-col-md-offset3">

			<div class="layui-form-item">
				<label class="layui-form-label">学生班级</label>
				<div class="layui-input-block">
					<v-select placeholder="请选择学生班级" class="select_vue" label="name" :options="classess"
						:reduce="item=>item.id" v-model="classesId"></v-select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">学生姓名</label>
				<div class="layui-input-block">
					<v-select placeholder="请选择学生姓名" class="select_vue" label="name" :options="students"
						:reduce="item=>item.id" v-model="item.studentId"></v-select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">家长身份</label>
				<div class="layui-input-block">
					<select v-validate="'required'" name="type" class="layui-input" v-model="item.type"
						placeholder="请选择身份">
						<option :value="0">本人</option>
						<option :value="1">父亲</option>
						<option :value="2">母亲</option>
						<option :value="3">其他家长</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label required">金额</label>
				<div class="layui-input-block">
					<input v-validate="'required'" placeholder="金额" class="layui-input" v-model="item.fee">
				</div>
			</div>

			<div v-if="show" @click="show=false">
				<div class="img_layer"></div>
				<div class="big_Img" style="height: 50px;width: 150px;">
					<div style="color: aliceblue;">请扫描付款码</div>
					<input v-model="item.code" ref="input" type="password" @keyup.enter="onSubmit"
						style="padding-left: 1px;">
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="button" class="offer" value="确认订单" @click="submit">
					<div class="return" onclick="history.back()" style="margin-top: 0 !important;">取消</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>

	<script src="/scriptZIP/vue-select.min.js"></script>


	<script src="/lib/laydate/laydate.js"></script>

	<script src="/js/common.js"></script>


	<script>
		var schoolId = top_params().id;
		Vue.component('v-select', VueSelect.VueSelect);

		var app = new Vue({
			el: '#vue-root',
			data: {
				item: {
					chargeId: params().id,
					type: 0
				},
				classesId: null,
				classess: [],
				students: [],
				show: false
			},
			created: function () {
				axios.get('/pc/classes/all/' + schoolId).then(function (res) {
					this.classess = res.data;
				}.bind(this));
				axios.get('/pc/charge/' + this.item.chargeId).then(function (res) {
					this.item.fee = res.data.fee / 100;
				}.bind(this));
			},
			methods: {
				submit: function () {
					if (!this.item.studentId || !this.item.fee) {
						alert('请填写完整');
						return;
					}
					this.show = true;
				},
				onSubmit: function () {
					var code = this.item.code;
					if (!(/^1[0-5]\d{16}$/.test(code) || /^(?:2[5-9]|30)\d{14,22}$/.test(code))) {
						alert('付款码错误');
						this.item.code = '';
						return;
					}
					this.$refs.input.blur();
					axios.post('/pc/order/micropay', this.item).then(function (res) {
						this.item.code = '';
						alert('支付成功');
						this.show = false;
					}.bind(this)).catch(function (err) {
						this.item.code = '';
						this.$refs.input.focus();
						alert('失败');
					}.bind(this));

				}
			},
			watch: {
				classesId: function (newValue, oldValue) {
					axios.get('/pc/student/all/' + newValue).then(function (res) {
						this.students = res.data;
					}.bind(this));
				},
				show: function (nv, ov) {
					if (nv) this.$nextTick(function (it) {
						this.item.code = '';
						this.$refs.input.focus();
					}.bind(this));

				}
			}
		});
	</script>
</body>

</html>